<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>货物列表页</title>
		<link rel="stylesheet" href="../../../layui/css/layui.css">
		<style>
			/* 自定义样式 */
			body, html {
				height: 100%;
				margin: 0;
				padding: 0;
				font-family: Arial, sans-serif;
			}
			.nav-item a {
				display: block;
				padding: 10px;
				color: #fff;
				text-decoration: none;
				transition: background-color 0.3s;
				border-left: 5px solid transparent;
			}
			.nav-item a:hover {
				background-color: #5FB878;
				border-left-color: #FF5722;
			}
			.header {
				background-color: #393D49;
				color: #fff;
				height: 50px;
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				line-height: 50px;
				padding-left: 10px;
				z-index: 1000;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
			}
		</style>
	</head>
	<body>
	<div class="header">
		<div style="font-size: 24px; font-weight: bold;">物流管理系统</div>
	</div>
		<h1 style="text-align: center;color: aqua;margin-top: 70px;margin-bottom: 20px;">货物列表</h1>
		<!-- 根据后端数据生成数据表格 -->
		<table class="layui-hide" id="test" lay-filter="test"></table>

		<script src="../../../layui/layui.js"></script>
		<script th:inline="none">
			layui.use(function(){
				
				//获取table组件的对象
				let table = layui.table;
				let $=layui.$;
				let layer=layui.layer;
				//头部工具栏事件
				table.on('toolbar(test)',function(obj){
					console.log("顶部工具栏事件被触发了...",obj)
					let event =obj.event;
					if(event=='addGoods'){
						layer.open({
							title:"添加货物",
							type:2,
							content:"/goodsAddPage",
							area:['500px','600px'],
							closeBtn:1,
							end:function(){
								table.reload("test")
							}
						});
					}else if(event=='deleGoods'){
						let id=obj.config.id;
						let checkStatus=table.checkStatus(id);
						let list =checkStatus.data;
						if(list && list.length==0){
							layer.msg("没有选择要删除的数据");
						}else{
							layer.confirm('确认删除?',{btn:['确定','取消']},function(index){
								let arr=[];
								for(let i=0;i<list.length;i++){
									arr.push(list[i].id);
								}
								$.ajax({
									type:"post",
									url:"http://47.120.50.119:8086/goods/deleteAllSelectGoods",
									data:JSON.stringify(arr),
									contentType:'application/json',
									dataType:"json",
									success:function(d){
										if(d.code==0){
											table.reload("test")
										}else{
											layer.msg(d.msg);
										}
									}
								});
								layer.close(index);
							});
						}
					}
				});

				table.on('tool(test)',function(obj){
					console.log(obj);
					let event=obj.event;
					if(event=='del'){
						layer.confirm('确定删除?',{btn:['确定','取消']},function(index){
							//确定删除
							let id =obj.data.id;
							//AJAX调用
							$.getJSON("http://47.120.50.119:8086/goods/deleteGoodsByGoodsId",{id:id},function(d){
								if(d.code===0){
									table.reload("test")
								}else{
									layer.msg(d.msg);
								}
							});
							//关闭提示框
							layer.close(index);
						});


					}else if(event=='edit'){
						layer.open({
							title:"更新货物",
							type:2,
							content:"/goodsEditPage",
							area:['500px','600px'],
							closeBtn:1,
							end:function(){
								table.reload("test")
							},
							success:function(layero,index,that){
								let body=layer.getChildFrame('body',index);
								body.find('#id').val(obj.data.id);
								body.find('#name').val(obj.data.name);
								body.find('#weight').val(obj.data.weight);
								body.find('#startStation').val(obj.data.startStation);
								body.find('#endStation').val(obj.data.endStation);
								body.find('#freight').val(obj.data.freight);
							}
						});
					}
				});
				//调用对象中的函数进行表格生成
				table.render({
					elem:"#test",
					url:"http://47.120.50.119:8086/goods/findAllGoodsPage",
					page: {
						limit:10,
						prev:"上一页",
						next:"下一页",
						groups:6
					},
					request:{
						pageName:'pageNo',
						limitName:'pageSize'
					},

					parseData:function(res){
						//console.log(res)
						return{
							"code": res.code, // 解析数据列表
							"msg": res.msg, // 解析提示文本
							"count": res.data.total, // 解析数据长度
							"data": res.data.page// 解析数据长度
						}
					},
					toolbar:`
						<div>
							<button type="button" lay-event="deleGoods"  class="layui-btn layui-btn-sm layui-bg-red">批量删除</button>
							<button type="button" lay-event="addGoods" class="layui-btn layui-btn-sm layui-bg-blue">添加</button> 
						</div>
					`,
					cols:[[
						{type:'checkbox',fixed:'left'},
						{
							title:"货物编号",
							field:"id"
						},
						{
							title:"货物名称",
							field:"name"
						},
						{
							title:"货物重量",
							field:"weight",
							sort:true
						},
						{
							title:"货物始发地",
							field:"startStation"
						},
						{
							title:"货物目的地",
							field:"endStation"
						},
						{
							title:"运费单价",
							field:"freight",
							sort:true
						},
						{
							title:"操作",
							templet:function(d){
								let s='<button type="button" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-normal">更新</button>'
								s+='<button type="button" lay-event="del" class="layui-btn layui-btn-xs layui-bg-red">删除</button>'
								return s;
							}
						}
					]]
				});
			});
		</script>
	</body>
</html>